<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdvancedJsApi.aspx.cs"
    Inherits="Demo._Default" %>

<%@ Register Src="UserControls/GridControl.ascx" TagName="GridControl" TagPrefix="uc3" %>
<%@ Register Src="UserControls/SliderControl.ascx" TagName="SliderControl" TagPrefix="uc2" %>
<%@ Register Src="UserControls/LightBox.ascx" TagName="LightBox" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JsApi Advanced Concepts</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <script src="script/prototype.js?load=effects,slider" type="text/javascript"></script>
    <script src="script/scriptaculous.js?load=effects,slider" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="float:left;">
        <h2 style="font-family: Courier New; margin-left: 50px">JsApi Advanced Concepts</h2>
        <ul style="font-family:Courier New;font-size:20px">
         <li><a style="text-decoration:none" href="Index.aspx">Index</a></li>
         <li><a style="text-decoration:none" href="DataBoundUserControlExample.aspx">DataBound UserControls</a></li>
         <li><a style="text-decoration:none" href="TemplatedDataBoundUserControlExample.aspx">Templated DataBound UserControls</a></li>
         <li><a style="text-decoration:none" href="JsApiIntroduction.aspx">Introducing the JsApi</a></li>
         <li>Advanced JsApi</li>
        </ul>
        <div id="fade" class="black_overlay" onclick="<%= this.LightBox1.Hide()%>"></div>
        <uc1:LightBox ID="LightBox1" runat="server" border="0px" padding="0" 
            EnableJsApi="True">
            <ItemTemplate>
                <div id="<%=this.LightBox1.ClientID%>" style="display: none; position: <%=this.LightBox1.position%>;
                    top: <%=this.LightBox1.top%>; left: <%=this.LightBox1.left %>; width: <%=this.LightBox1.width %>;
                    height: <%=this.LightBox1.height %>; padding: <%=this.LightBox1.padding%>; border: <%=this.LightBox1.border %>;
                    background-color: <%=this.LightBox1.backgroundColor %>; z-index: <%=this.LightBox1.zIndex %>;
                    overflow: <%=this.LightBox1.overFlow %>;">
                    <h3>Hello World</h3>
                </div>
            </ItemTemplate>
        </uc1:LightBox>
        <uc3:GridControl ID="GridControl1" runat="server" Mode="Server" 
            EnableJsApi="True" ViewStateMode="Disabled"></uc3:GridControl>
        <uc2:SliderControl ID="SliderControl1" runat="server" Mode="Server" 
            EnableJsApi="True" />
        <a id="alabel" style="margin-left:180px" href="javascript:void(0)" onclick="<%= this.LightBox1.Show()%>">click here to show lightbox</a>&nbsp;
        <br />
    </div>
    <div style="float:right;background-color:white;background-image:none;border:1px solid menu;font-family:Courier New;font-size:18px;padding:15px">
        
        Here is a more advanced example. We still have our lightbox but this time it's brought along a few friends. But before we get started you need to familiarize yourself 
        with a few concepts. (By the way the slider is filtering the records by the Q4 results).
        <br />
        <strong>NOTE: YOU MAY NEED TO ENABLE COMPATIBILITY MODE ON IE TO GET THE SLIDER CONTROL IN THIS DEMO TO WORK.</strong>
        <hr /> 
        <ul style="list-style-type: none;">
            <li><img src="images/clientsidevaribale.png" /></li>
            <li>The <strong>ClientSideVariable</strong> attribute </li>
            <li>Place this on a public property to mark it as serializable.</li>
        </ul>
        <ul style="list-style-type: none;">
            <li><img src="images/jsconverter.png" /></li>
            <li>The <strong>JsConverter</strong> attribute </li>
            <li>Place this on a public property that is marked as a <strong>ClientSideVariable</strong> to indicate the availability of a converter to transform the return type of the property to the Javascript compatible representation. This is only necessary for complex types. Primitives are supported without the need for specifying a converter.</li>
        </ul>
         <ul style="list-style-type: none;">
            <li>The <strong>IJsConverter</strong> interface </li>
            <li>The interface all converters must implement to be compatible with the <strong>JsApi</strong></li>
        </ul>
        <hr />
         <ul style="list-style-type: none;">
            <li><img src="images/jsoperation.png" /></li>
            <li>The <strong>JsFunction</strong> attribute </li>
            <li>
                Place this on a public method to mark it as serializable. Methods marked with the JsFunction attribute <strong>must</strong> return a type of <strong>JsOperation</strong> and can take in one or more parameters of type <strong>DialectSoftware.Web.JsAPI.var</strong>.
                JsFunctions are a combination of C# and string concatination that are fed into a <strong>function</strong> object through the <strong>AddOperation</strong> method. The function and metadata about the class and the C# method are then fed into the <strong>JsOperation</strong> object before it 
                is returned from the method. When dealing with the <strong>JsApi</strong> methods and properties standard C# syntax can be used:
                <br /><br />
                    <ul>
                        <li>this.OnChange(value, this.GetJsType().ClientID) use this syntax to emit the complete client-side method invocation with parametrs</li>
                        <li>this.GetJsType().ClientID use this syntax to emit the complete client-side property accessor. Think of GetJsType() as reflection for the client-side object graph.</li>
                        <li>this.GetJsType().OnFilter use this syntax to emit method stubs for client-side event delegation </li>
                        <li>even use the syntax in the ascx file &lt;%=this.Initialize()%&gt;</li>
                    </ul>
            </li>
        </ul>
        <hr />
            That about covers it. With the information you have just been given and by viewing the source and working your way back to the code behind you should be able to discern what's going on.
            On the client I am leveraging the Prototype framework 1.6.0 , Scriptaculous 1.8.0, and a few custom plugins I cobbled together from the internet. However, you can choose to code to any 
            library you like Prototype, JQuery or otherwise. Below is a diagram that illustrates what your technology stack would look like.
            <img src="images/techstack.png" />

            <br />
            <br />

            One more note before we conclude. Currently both the Slider control and the Grid control are set to run in Server Mode. Stop the project and in Design Mode select the SliderControl. In the properties 
            Menu under Behavior find Mode and select Client. Then select the GridContol and in the properties Menu under Behavior find Mode and select Ajax. Start the project. Can you tell the difference.
        <br />
        <br />
        <br />
    
    </div>
    </form>
    <script type="text/javascript">
        SliderControl1.OnSlide = Event.delegate(SliderControl1.OnSlide, function (value, id) { document.title = value; });
        SliderControl1.OnSlide = Event.delegate(SliderControl1.OnSlide, function (value, id) { document.getElementById("alabel").innerText = value; });
        SliderControl1.OnChange = Event.delegate(SliderControl1.OnChange, function (value, id) { document.getElementById("alabel").innerText = value; });
        <%if(!(SliderControl1.Mode ==  DialectSoftware.Web.UI.CustomUserControls.ControlMode.Server && GridControl1.Mode ==  DialectSoftware.Web.UI.CustomUserControls.ControlMode.Server)) {%>
        SliderControl1.OnChange = Event.delegate(SliderControl1.OnChange, function (value, id) { <%=this.GridControl1.Filter("value")%>; });
        <%} %>
    </script>
</body>
</html>
